<template>
    <div class="gs-gw-list">
        <section class="selectBox">
            <div>
                <el-cascader :options="options" v-model="areaId" :show-all-levels="false" change-on-select @change="handleChange">
                </el-cascader>
            </div>
            <div>
                <el-select v-model="dicValue" placeholder="请选择" @change="handleChange">
                    <el-option value="">全部</el-option>
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
        </section>
        <section>
            <div class="list" v-for="item in list" :key="item.value" @click="toDetails(item.id,item.type,item.point.wgLon,item.point.wgLat)">
                <div v-if="item.type=='S04'">
                    <div class="head"><b>{{item.name}}</b><i class="iconfont icon-jiantou-copy"></i></div>
                    <div class="flex">
                        <div style="flex:0 0 45%">瞬时流量：{{item.flowInstantValue}}</div>
                        <div style="flex:0 0 55%">累计流量：{{item.flowCumulativeValue}}</div>
                    </div>
                    <div class="flex">
                        <div class="type">压力：{{item.pressureValue}}</div>
                    </div>
                    <div class="area">
                        <span @click="toMap(item.point.wgLon,item.point.wgLat)">查看地图<i class="iconfont icon-icon-"></i></span>
                    </div>
                </div>
                <div v-if="item.type=='S05'">
                    <div class="head"><b>{{item.name}}</b><i class="iconfont icon-jiantou-copy"></i></div>
                    <div class="flex">
                        <div class="type">压力：{{item.pressureValue}}</div>
                    </div>
                    <div class="area">
                        <span @click="toMap(item.point.wgLon,item.point.wgLat)">查看地图<i class="iconfont icon-icon-"></i></span>
                    </div>
                </div>
                <div v-if="item.type=='S06'">
                    <div class="head"><b>{{item.name}}</b><i class="iconfont icon-jiantou-copy"></i></div>
                    <div class="flex">
                        <div style="flex:0 0 45%">浊度：{{item.turbidity}}</div>
                        <div style="flex:0 0 55%">PH：{{item.phvalue}}</div>
                    </div>
                    <div class="flex">
                        <div class="type">余氯：{{item.chlorine}}</div>
                    </div>
                    <div class="area">
                        <span @click="toMap(item.point.wgLon,item.point.wgLat)">查看地图<i class="iconfont icon-icon-"></i></span>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dicValue: '',
            list: [],
            areaList: [],
            areaId: [],
            options: [],
            options2: [
                {
                    value: 'S04',
                    label: '流量监测点'
                },
                {
                    value: 'S05',
                    label: '压力监测点'
                },
                {
                    value: 'S06',
                    label: '水质监测点'
                }
            ],
        }
    },
    mounted() {
        this.getList()
        this.getEareasList()
    },
    methods: {
        handleChange(value) {
            console.log(value);
            this.getList()
        },
        //获取供水管网列表
        getList() {
            this.$api.gongshuiguanwang.watersupnets({
                areaId: this.areaId[this.areaId.length - 1],
                dicValue: this.dicValue,
                pageNum: '1'
            }).then(res => {
                if (res.success) {
                    this.list = res.data.list
                }
            });
        },
        //片区列表
        getEareasList() {
            this.$api.gongshuiguanwang.eareas({
                pid: '1'
            }).then(res => {
                if (res.success) {
                    this.areaList = res.data
                    for (let i in res.data) {
                        var childList = []
                        for (let j in res.data[i].childList) {
                            childList.push({
                                value: res.data[i].childList[j].areaId,
                                label: res.data[i].childList[j].areaName,
                            })
                        }
                        this.options.push({
                            value: res.data[i].areaId,
                            label: res.data[i].areaName,
                            children: childList
                        })
                    }
                }
            });
        },
        //跳转到详情
        toDetails(id, type, x, y) {
            this.$router.push({ path: 'details', query: { id: id, type: type, x: x, y: y } })
        },
        //地图
        toMap(x, y) {
            this.$router.push({ path: '/bigmap', query: { x: x, y: y } })
            event.stopPropagation();

        }
    }
}
</script>

<style>
</style>
